<template>
  <div class="app-container">
    <el-form :model="form" label-width="150px">
      <el-form-item label="控制">
        <el-button @click="toggleRun">
          {{ form.run ? "停止" : "启动" }}
        </el-button>
      </el-form-item>

      <el-form-item label="滚动方向">
        <el-select v-model="form.direction">
          <el-option
            v-for="(item, i) in directionOption"
            :value="item.value"
            :key="i"
          >
            {{ item.label }}
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="步进速度">
        <el-input-number v-model="form.step" :min="1" :max="100" />
      </el-form-item>

      <el-form-item label="单步高度">
        <el-input-number v-model="form.singleHeight" :min="0" />
      </el-form-item>

      <el-form-item label="单步宽度">
        <el-input-number v-model="form.singleWidth" :min="0" />
      </el-form-item>

      <el-form-item label="单步等待时间 (ms)">
        <el-input-number v-model="form.singleWaitTime" :min="0" />
      </el-form-item>

      <el-form-item label="动画延时 (ms)">
        <el-input-number v-model="form.delay" :min="0" />
      </el-form-item>

      <el-form-item label="拷贝次数">
        <el-input-number v-model="form.copyNum" :min="1" />
      </el-form-item>

      <el-form-item label="开启鼠标悬停">
        <el-switch v-model="form.hover" />
      </el-form-item>

      <el-form-item label="开启单行横向滚动">
        <el-switch v-model="form.singleLine" />
      </el-form-item>
    </el-form>

    <vue3-seamless-scroll
      :list="list"
      class="scroll"
      v-model="form.run"
      :direction="form.direction"
      :is-watch="true"
      :hover="form.hover"
      :count="Infinity"
      :limit-scroll-num="5"
      :step="form.step"
      :single-height="form.singleHeight"
      :single-width="form.singleWidth"
      :single-wait-time="form.singleWaitTime"
      :is-rem-unit="true"
      :delay="form.delay"
      :ease="'ease-in'"
      :copy-num="form.copyNum"
      :wheel="false"
      :single-line="form.singleLine"
    >
      <div class="item" v-for="(item, index) in list" :key="index">
        <span>{{ item.title }}</span>
        <span>{{ item.date }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const form = ref({
  run: false,
  direction: "up",
  step: 1,
  singleHeight: 0,
  singleWidth: 0,
  singleWaitTime: 1000,
  delay: 0,
  copyNum: 1,
  hover: false,
  singleLine: false,
});

const directionOption = ref([
  { label: "上", value: "up" },
  { label: "下", value: "down" },
  { label: "左", value: "left" },
  { label: "右", value: "right" },
]);

const list = ref([
  {
    title: "Vue3.0 无缝滚动组件展示数据第1条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第2条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第3条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第4条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第5条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第6条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第7条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第8条",
    date: new Date().toLocaleString(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第9条",
    date: new Date().toLocaleString(),
  },
]);

const toggleRun = () => {
  form.value.run = !form.value.run;
};
</script>

<style>
.scroll {
  height: 270px;
  width: 500px;
  overflow: hidden;
  margin-top: 20px;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>
